<template>
	<!-- 待付款 -->
	<!-- 待收货 -->
	<!-- 我的 -->
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{current: tabCurrentIndex === index}" @click="tabClick(index)">
				{{item.text}}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex" >
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower='scrolltolower'>
					<!-- 空白页 -->
					<view v-if="data.length === 0" class="imgar">
						<!-- <image src="../../static/images/xiaaz.png"></image> -->
						<image src="../../static/gwcymian/kbaiy.png"></image>
					</view>
					<!-- 订单列表 -->
					<view class="order-item" v-for="(item,index) in data" :key="index" @click="skuif(item,index)">
						<view class="i-top b-b">
							<text class="time">{{item.gmtCreate}}</text>
							<text class="state" v-if="item.status==10">未付款</text>
							<text class="state" v-if="item.status==12">正在拼团</text>
							<text class="state" v-if="item.status==20">待出库</text>
							<text class="state" v-if="item.status==30">待收货</text>
							<text class="state" v-if="item.status==40">待评价</text>
							<text class="state" v-if="item.status==50">已完成</text>
							<text class="state" v-if="item.status==60">退款中</text>
							<text class="state" v-if="item.status==70">已退款</text>
							<text class="state" v-if="item.status==80">已取消</text>
							<text class="state" v-if="item.status==90">已取消(系统)</text>
						</view>
						<scroll-view v-if="item.skuList.length > 1 " class="goods-box" scroll-x >
							<view class="goods-item" v-for="(items,index) in item.skuList" :key="index">
								<image class="goods-img" :src="items.img" mode="aspectFill"></image>
							</view>
						</scroll-view>
						<view class="goods-box-single" v-if="item.skuList.length == 1"
							v-for="(items,index) in item.skuList" :key="index" >
							<image class="goods-img" :src="items.img" mode="aspectFill"></image>
							<view class="right">
								<text class="title clamp">{{items.spuTitle}}</text>
								<text class="attr-box">{{items.title}} X {{items.num}}</text>
								<text class="price">{{items.price/100}}</text>
							</view>
						</view>

						<view class="price-box">
							共
							<text class="num">{{item.num}}</text>
							件商品 实付款
							<text class="price">{{item.actualPrice/100}}</text>
						</view>
						<view class="action-box b-t" v-if="item.status!=90">
							<button class="action-btn" @click="cancelOrder(item,index)" v-if="item.status==10">取消订单</button>
							<button class="action-btn recom" v-if="item.status==10" @click.stop="purchase(item,index)">立即支付</button>
							<button class="action-btn recom" v-if="item.status==20"
								@click.stop="refund(item,index)">申请退款</button>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view>
			<!--弹窗-->
			<modal style='' v-if="showPop" title="退款" confirm-text="确定" cancel-text="取消" @cancel="cancelPop" @confirm="confirmPop">
				<input style="border-top: 1px solid #F3F3F3;border-bottom: 1px solid #F3F3F3;" type='text' placeholder="简要描述退款理由.."
				 v-model:value="valuename" />
			</modal>
		</view>
		<view class="load">
			{{loadText}}
		</view>
	</view>
</template>

<script scoped>
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				current: 0,
				text: '',
				navList: [{
						state: 0,
						text: '全部',
						loadingType: 'more',
					},
					{
						state: 10,
						text: '待付款',
						loadingType: 'more',
					},
					{
						state: 20,
						text: '待出货',
						loadingType: 'more',
					},
					{
						state: 30,
						text: '待收货',
						loadingType: 'more',
					},
					{
						state: 40,
						text: '待评价',
						loadingType: 'more',
					},
					{
						state: 60,
						text: '退款中',
						loadingType: 'more',
					}
				],
				data: [],
				state: 0,
				num:5,
				showPop: false, //弹窗
				valuename: '',
				loadText:"没有更多数据了"
				// dadate:[]
			};
		},
		onShow() {
			if (uni.getStorageSync('accessToken') == '') {
				uni.showModal({
					title: '登录提示',
					content: '您尚未登录，是否立即登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '../long/long'
							})
							return
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		},
		onLoad(options) {
			if (options.statu != null) {
				this.state = JSON.parse(options.statu)
				this.tabCurrentIndex = JSON.parse(options.goid)
				// console.log(this.tabCurrentIndex)
			} 
			this.scrolltolower()
			this.init()
			if (options.statu == 0) {
				this.scrolltolower()
			} 
		},
		onPullDownRefresh() {
			// console.log('refresh');
			var that = this
			this.loadText = "上拉显示更多数据"
			setTimeout(function() {
				that.loadText = "没有更多数据了"
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			//获取订单列表
			init() {
				uni.request({
					url: 'http://192.168.1.54:8081/m.api?_gp=order&_mt=getOrderPage&pageNo=1&pageSize='+this.num+'&status=' + this.state + '',
					method: 'GET',
					header: {
						'accesstoken': uni.getStorageSync('accessToken')
					},
					success: res => {
						console.log(res,"456456456")
						for (var i = 0; i < res.data.data.items.length; i++) {
							var nums = 0;
							for (var j = 0; j < res.data.data.items[i].skuList.length; j++) {
								nums += res.data.data.items[i].skuList[j].num
							}
							var date = new Date();
							date.setTime(res.data.data.items[i].gmtCreate);//时间戳
							var month = date.getMonth() + 1;//月,为什么要加一呢因为跟中国的月份相差1所以有加1
							if (month < 10)
								month = "0" + month;
							var hours = date.getHours();//时
							if (hours < 10)
								hours = "0" + hours;
							var minutes = date.getMinutes();//钟
							if (minutes < 10)
								minutes = "0" + minutes;
												// 年									日
							var time = date.getFullYear() + "-" + month + "-" + date.getDate() + " " + hours + ":" + minutes;
							res.data.data.items[i].gmtCreate = time
							res.data.data.items[i].num = nums
						}
						this.data = res.data.data.items
						// console.log('data', this.data)
					}
				})
			},
			scrolltolower(source){
				this.num += 5
				this.init()
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.state = this.navList[e.target.current].state
				this.init()
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.state = this.navList[index].state
				this.init()
			},
			// 订单详情
			skuif(item,index){
				console.log(item,'11wo')
				uni.navigateTo({
					url: '/pages/orders/buynow?order='+item.id
				});
			},
			//取消订单
			cancelOrder(item, index) {
				let that = this
				console.log(item.skuList[0].orderNo)
				uni.showModal({
					title: '取消？',
					content: '您确定要取消订单吗？',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: 'http://192.168.1.54:8081/m.api',
								data:{
									"_gp":"order",
									"_mt":"cancel",
									"orderNo":item.skuList[0].orderNo
								},
								header: {
									'accesstoken': uni.getStorageSync('accessToken')
								},
								success: function(res) {
									console.log(res)
									if (res.data.errmsg == '成功') {
										uni.showToast({
											title: '取消成功',
										})
										that.init()
									}
								}
							})
						}
					}
				})
			},
			confirmPop(){
				let that = this
			},
			cancelPop() { //取消
				this.showPop = false
			},
			//退款
			refund(item, index) {
				uni.request({
					url: 'http://192.168.1.54:8081/m.api?_gp=order&_mt=offlinePrepay&orderNo=' + item.skuList[0].orderNo,
					header: {
						'accesstoken': uni.getStorageSync('accessToken')
					},
					success: function(res) {
						console.log(res)
						uni.showModal({
							title:'提示',
							content:res.data.errmsg,
						})
					}
				})
			},
			// 立即支付
			purchase(item, index) {  //1012021031744361299
				let eid = item.orderNo
				let money = item.skuList[index].price/100
				console.log(eid,money)
				uni.navigateTo({
					url: `/pages/payment/payment?mninr=${eid}&mon=${money}`
				});
			}
		}
	}
</script>

<style>
	page,
	.content {background: #F5F5F5;height: 100%;}
	.current {color: #fa436a;border-bottom: 2px solid #fa436a;}
	.swiper-box {height: calc(100% - 40px);}
	.list-scroll-content {height: 100%;}
	.navbar {display: flex;height: 100rpx;padding: 0 10rpx;background: #fff;box-shadow: 0 1px 5px rgba(0, 0, 0, .06);position: relative;z-index: 10;}
	.navbar .nav-item {flex: 1;display: flex;justify-content: center;align-items: center;height: 100%;font-size: 26rpx;color: #333;position: relative;}
	.navbar .nav-item .current {color: red !important;}
	.nav-item .current :after {content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 44px; height: 0; border-bottom: 2px solid red;}
	.uni-swiper-item {height: auto;}
	.imgar{width: 200rpx;height: 200rpx;position: fixed;left: 40%;top: 40%;}
	.imgar image{width: 100%;height: 100%;}
	.order-item {display: flex;flex-direction: column;padding-left: 30upx;background: #fff;margin-top: 16upx;}
	.order-item .i-top {display: flex; align-items: center; height: 80upx; padding-right: 30upx; font-size: 26rpx; color: #333; position: relative;}
	.order-item .i-top .time {flex: 1;}
	.order-item .i-top .state {color: red;}
	.order-item .i-top .del-btn {padding: 10upx 0 10upx 36upx; font-size: $font-lg; color: red; position: relative;}
	.i-top .del-btn :after {content: ''; width: 0; height: 30upx; border-left: 1px solid $border-color-dark; position: absolute; left: 20upx; top: 50%; transform: translateY(-50%);}
	.order-item .goods-box {height: 160upx; padding: 20upx 0; white-space: nowrap;}
	.order-item .goods-box .goods-item {width: 120upx; height: 120upx; display: inline-block; margin-right: 24upx;}
	.order-item .goods-box .goods-img {display: block;width: 100%;height: 100%;}
	.order-item .goods-box-single {display: flex;padding: 20upx 0;}
	.order-item .goods-box-single .goods-img {display: block;width: 120upx;height: 120upx;}
	.goods-box-single .right {flex: 1;display: flex;flex-direction: column;padding: 0 30upx 0 24upx;overflow: hidden;}
	.goods-box-single .right .title {font-size: 27rpx;color: #333;line-height: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;}
	.goods-box-single .right .attr-box {font-size: 24rpx;color: #9FA2A7;padding: 10rpx 12rpx;}
	.goods-box-single .right .price {font-size: 28rpx;color: red;}
	.goods-box-single .right .price:before {content: '￥';font-size: $font-sm;margin: 0 2upx 0 8upx;}
	.price-box {display: flex; justify-content: flex-end; align-items: baseline; padding: 20rpx 30rpx; font-size: 26rpx; color: #9FA2A7;}
	.price-box .num {margin: 0 8rpx; color: red;}
	.price-box .price {font-size: 28rpx; color: red;}
	.price-box .price:before {content: '￥'; font-size: 30rpx; margin: 0 2rpx 0 8rpx;}
	.order-item .action-box {display: flex; justify-content: flex-end; align-items: center; height: 80rpx; position: relative; padding-right: 30rpx; border-top: #F5F5F5 1rpx solid;}
	.order-item .action-btn {width: 130rpx; height: 60rpx; margin: 0; margin-left: 24rpx; padding: 0; text-align: center; line-height: 60upx; font-size: 24rpx; color: #333; background: #fff; border-radius: 100px; border: #9FA2A7 0.5rpx solid;}
	.order-item .action-btn :after {border-radius: 100px;}
	.order-item .action-btn .recom {background: #fff9f9; color: #333;}
	.action-btn .recom:after {border-color: #f7bcc8;}

	/* load-more */
	.uni-load-more {display: flex; flex-direction: row; height: 80upx; align-items: center; justify-content: center;}
	.uni-load-more__text {font-size: 28upx; color: #999;}
	.uni-load-more__img {height: 24px; width: 24px; margin-right: 10px}
	.uni-load-more__img>view {position: absolute;}
	.uni-load-more__img>view view {width: 12rpx; height: 4rpx; border-top-left-radius: 1px; border-bottom-left-radius: 1px; background: #999; position: absolute; opacity: .2; transform-origin: 50%; animation: load 1.56s ease infinite;}
	.uni-load-more__img>view view:nth-child(1) {transform: rotate(90deg); top: 2px; left: 9px;}
	.uni-load-more__img>view view:nth-child(2) {transform: rotate(180deg); top: 11px; right: 0;}
	.uni-load-more__img>view view:nth-child(3) {transform: rotate(270deg); bottom: 2px; left: 9px;}
	.uni-load-more__img>view view:nth-child(4) {top: 11px; left: 0;}
	.load1,.load2,.load3 {height: 24px;width: 24px;}
	.load2 {transform: rotate(30deg)}
	.load3 {transform: rotate(60deg)}
	.load1 view:nth-child(1) {animation-delay: 0s;}
	.load2 view:nth-child(1) {animation-delay: .13s;}
	.load3 view:nth-child(1) {animation-delay: .26s;}
	.load1 view:nth-child(2) {animation-delay: .39s;}
	.load2 view:nth-child(2) {animation-delay: .52s;}
	.load3 view:nth-child(2) {animation-delay: .65s;}
	.load1 view:nth-child(3) {animation-delay: .78s;}
	.load2 view:nth-child(3) {animation-delay: .91s;}
	.load3 view:nth-child(3) {animation-delay: 1.04s;}
	.load1 view:nth-child(4) {animation-delay: 1.17s;}
	.load2 view:nth-child(4) {animation-delay: 1.3s;}
	.load3 view:nth-child(4) {animation-delay: 1.43s;}

	@-webkit-keyframes load {
		0% {
			opacity: 1
		}

		100% {
			opacity: .2
		}
	}
	.load {width: 100%;height: 100rpx;float: left;text-align: center;line-height: 100rpx;font-size: 25rpx;color: #777777;}
</style>
